<template>
  <basic :field="field">
    <template slot="fieldProps">
      <FormItem label="最大值">
        <Input v-model="fieldProps.max" @on-change="handleChange('max')"/>
      </FormItem>
      <FormItem label="最小值">
        <Input v-model="fieldProps.min" @on-change="handleChange('min')"/>
      </FormItem>
    </template>
  </basic>
</template>

<script>
import basic from './basic.vue';

export default {
  name: 'fieldNumber',
  components: {
    basic
  },
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      fieldProps: {
        min: 0,
        max: 999
      }
    };
  },
  methods: {
    handleChange(name) {
      let field = {};
      switch (name) {
        case 'min':
          field = { props: { min: this.fieldProps.min } };
          break;
        case 'max':
          field = { props: { max: this.fieldProps.max } };
          break;
      }
      this.$parent.$parent.$emit('on-change-field', field);
    },
    init() {
      const { min, max } = this.field.props;
      this.fieldProps = {
        min: min || 0,
        max: max || 999
      };
    }
  },
  created() {
    this.init();
  },
  watch: {
    field: {
      handler() {
        this.init();
      },
      deep: true
    }
  }
};
</script>
